<template>
    <div ref="navList" class="nav-list">
       <ul class="nav-content">
           <li v-for="(item, key) in list" :key=key :class="{navitemactivat: onItem == key}" @click="changeActive(key,item.ref)">{{item.text}}</li>
       </ul>
    </div>
</template>

<script>
import {monitorScroll} from '@/api/utils.js'
export default {
  name: 'navList',
  data() {
    return{
        onItem: 0
    }
  },
  props: {
      list: {
        type: Array,
        required: true
      }
  },

  mounted(){
    // let that = this
    // this.$nextTick(()=>{
    //     monitorScroll.call(that) 
    // })
    
  },
  
  methods: {
    changeActive (key,ref) {
        this.onItem = key;
        this.$emit('tonav',ref)
        // console.log('key:',key)
        // console.log('this.onItem:',this.onItem) 
    },
    addNavEvent(){
        let that = this
        // console.log('parent emit')
        this.$nextTick(()=>{
            monitorScroll.call(that) 
        })
    }
  },
  watch: {
     
  }
}
</script>

<style lang="stylus" scoped>
.nav-content{
    width: 216px;
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.1);
    li{
        position: relative;
        height:58px;
        padding-left: 30px;
        background:rgba(255,255,255,1);
        line-height: 58px;
        font-size:14px;
        color:rgba(130,130,130,1);
        cursor: pointer;
        &:hover{
            color:rgba(30,30,30,1);
        }
        &:hover:after{
            position: absolute;
            top: 27px;
            left: 0px;
            content: '';
            width:20px;
            height:4px;
            background:rgba(20,87,253,1);  
        }
    }
    .navitemactivat{
    color:rgba(30,30,30,1);
    }
}

.navitemactivat:after{
    position: absolute;
    top: 27px;
    left: 0px;
    content: '';
    width:20px;
    height:4px;
    background:rgba(20,87,253,1);  
}
</style>
